<template>
	<view class="page consultation_details_page">
		<view class="details_group">
			<view class="details_item">
				<view class="item_title">
					姓名
				</view>
				<view class="item_text">
					{{patient.patientName || '患者姓名'}}
				</view>
			</view>
			<view class="details_item">
				<view class="item_title">
					年龄
				</view>
				<view class="item_text">
					{{patient.age || ''}}岁
				</view>
			</view>
			<view class="details_item required">
				<view class="item_title">
					身高
				</view>
				<view class="item_text">
					<view class="item_input">
						<input type="text" v-model="form.height" placeholder="请选择身高" />
						<uni-icons class="icon" type="right" size="12" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="details_item required">
				<view class="item_title">
					体重
				</view>
				<view class="item_text">
					<view class="item_input">
						<input type="text" v-model="form.weight" placeholder="请选择体重" />
						<uni-icons class="icon" type="right" size="12" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="details_group">
			<view class="details_item required">
				<view class="item_title">
					发病时间
				</view>
				<view class="item_text">
					<view class="item_input">
						<picker class="forms_picker" mode="date" @change="getmorbidityTime">
							<view class="item_input">
								<input type="text" v-model="morbidityTimes" placeholder="请选择发病时间" disabled />
								<uni-icons class="icon" type="right" size="12" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="details_group">
			<view class="details_item block required">
				<view class="item_title">
					您觉得现在最主要的不适是什么，请详细描述下？
				</view>
				<view class="item_text">
					<div class="textarea">
						<textarea maxlength="100" v-model="form.diseaseDescribe"
							placeholder="可在此处填写您觉得现在最主要的不适是什么，请详细描述下？(请勿填写姓名、联系方式等个人隐私信息)?" />
					</div>
				</view>
			</view>
			<view class="details_item block">
				<view class="item_title">
					您发病的时候，伴随那些其他的不适？
				</view>
				<view class="item_text">
					<div class="textarea">
						<textarea maxlength="100" v-model="form.otherDiscomforts"
							placeholder="可在此处填写您发病的时候，伴随那些其他的不适？(请勿填写姓名、联系方式等个人隐私信息)?" />
					</div>
				</view>
			</view>
		</view>
		<view class="details_group">
			<view class="details_item block required">
				<view class="item_title">
					本次生病是否去医院就诊过？哪家机构？
				</view>
				<view class="item_text">
					<div class="radio_group">
						<radio-group @change="radioChange($event,'hospitalIf')">
							<label v-for="(item, index) in typeList" :key="item.value">
								<view class="radio_item">
									<radio class="radio" :value="item.value" color="#3B6CFE" />
									<view>{{item.text}}</view>
									<view class="textarea" v-if="form.hospitalIf == 1 && item.value ==1"><input type="text"
											v-model="form.hospitalName" placeholder="请填写就诊医院名称" /></view>
								</view>
							</label>
						</radio-group>
					</div>
				</view>
			</view>
			<view class="details_item block">
				<view class="item_title">
					做了哪些检查和治疗，结果和效果如何？
				</view>
				<view class="item_text">
					<div class="textarea">
						<textarea maxlength="100" v-model="form.results"
							placeholder="可在此处填写您当前做了哪些检查和治疗，结果和效果如何？(请勿填写姓名、联系方式等个人隐私信息)?" />
					</div>
				</view>
			</view>
			<view class="details_item block required">
				<view class="item_title">
					当前是否有正在使用的药物?
				</view>
				<view class="item_text">
					<div class="radio_group">
						<radio-group @change="radioChange($event,'medicationIf')">
							<label v-for="(item, index) in typeList" :key="item.value">
								<view class="radio_item">
									<radio class="radio" :value="item.value" color="#3B6CFE" />
									<view>{{item.text}}</view>
								</view>
							</label>
						</radio-group>
					</div>
				</view>
			</view>
			<view class="details_item block required">
				<view class="item_title">
					是否有过手术或放化疗等重大疾病治疗经历及慢性病史？
				</view>
				<view class="item_text">
					<div class="radio_group">
						<radio-group @change="radioChange($event,'radiotherapyIf')">
							<label v-for="(item, index) in typeList" :key="item.value">
								<view class="radio_item">
									<radio class="radio" :value="item.value" color="#3B6CFE" />
									<view>{{item.text}}</view>
								</view>
							</label>
						</radio-group>
					</div>
				</view>
			</view>
			<view class="details_item block">
				<view class="item_title">
					请上传能反应患者病情的相关资料？
				</view>
				<view class="item_text">
					<div class="image_group">
						<uni-file-picker fileMediatype="image" mode="grid" :image-styles="imageStyles" title="最多选择9张图片">
							<view class="file_text">
								<uni-icons type="plusempty" size="20"></uni-icons>
								<view>
									上传图片
								</view>
							</view>
						</uni-file-picker>
					</div>
				</view>
			</view>
			<view class="details_item block">
				<view class="item_title">
					想获得什么帮助？
				</view>
				<view class="item_text">
					<div class="textarea">
						<textarea maxlength="100" v-model="form.consultationDescribe"
							placeholder="可在此处填写您希望得到医生的什么帮助(请勿填写姓名、联系方式等个人隐私信息)" />
					</div>
				</view>
			</view>
			<view class="btns_group">
				<view class="btns consultation_btns gray" @click="gotoPage">
					跳过
				</view>
				<view class="btns consultation_btns" @click="submit">
					下一步
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		insertConsultationForm,
		insertAppointInfo,
		insertappointConsultationForm,
		insertoutpatientInfo,
		createOrderInfo
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'
	export default {
		name: '',
		data() {
			return {
				imageStyles: {
					width: 70,
					height: 70,
				},
				form: {
					patientId: "",
					consultationDescribe: "",
					attachment: "",
					morbidityTimes: "",
					diseaseDescribe: "",
					height: "",
					weight: "",
					otherDiscomforts: "",
					hospitalIf: "",
					hospitalName: "",
					results: "",
					medicationIf: "",
					radiotherapyIf: "",
				},
				patient: {
					patientName: '',
					age: ''
				},
				morbidityTimes: "",
				outpatientInfoCreate: {},
				typeList: [{
					"value": 1,
					"text": "是"
				}, {
					"value": 0,
					"text": "否"
				}]
			}
		},
		onLoad(options) {
			if (options.outpatientInfoCreate) {
				this.outpatientInfoCreate = JSON.parse(options.outpatientInfoCreate)
				this.form.patientId = this.outpatientInfoCreate.patientId
				this.patient.patientName = this.outpatientInfoCreate.name
				this.patient.age = this.outpatientInfoCreate.age
				this.form.height = this.outpatientInfoCreate.height
				this.form.weight = this.outpatientInfoCreate.weight
			} else {
				this.form.patientId = getUserInfo().id
			}
		},
		methods: {
			radioChange(e, name) {
				this.form[name] = parseInt(e.detail.value)
			},
			getmorbidityTime(e) {
				this.morbidityTimes = e.detail.value
				this.form.morbidityTimes = `${e.detail.value}T00:00:00`
			},
			gotoPage() {
				if (this.outpatientInfoCreate.appointTimes) {
					this.insertAppointInfo({
						...this.outpatientInfoCreate,
						status: 0
					})
				} else {
					this.insertoutpatientInfo({
						...this.outpatientInfoCreate
					})
				}
			},
			submit() {
				if (!this.form.height) {
					uni.showToast({
						icon: 'none',
						title: '请输入身高'
					})
					return
				}
				if (!this.form.weight) {
					uni.showToast({
						icon: 'none',
						title: '请输入体重'
					})
					return
				}
				if (!this.form.morbidityTimes) {
					uni.showToast({
						icon: 'none',
						title: '请选择您发病时间'
					})
					return
				}
				if (!this.form.diseaseDescribe) {
					uni.showToast({
						icon: 'none',
						title: '请填写您目前的状况'
					})
					return
				}
				if (this.form.hospitalIf.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择您是否去医院就诊过'
					})
					return
				}
				if (this.form.medicationIf.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择当前是否有使用药物'
					})
					return
				}
				if (this.form.radiotherapyIf.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择当前是否有做过手术和化疗重大疾病'
					})
					return
				}
				if (this.outpatientInfoCreate.appointTimes) {
					this.insertappointConsultationForm({
						...this.form
					})
				} else {
					this.insertConsultationForm({
						...this.form,
						...this.outpatientInfoCreate,
						status: 1
					})
				}
			},
			// 新增 订单
			createOrderInfo(outpatientId) {
				createOrderInfo({
					doctorId: this.outpatientInfoCreate.doctorId,
					patientId: this.outpatientInfoCreate.patientId,
					outpatientId,
					orderType: this.outpatientInfoCreate.consultationMethod,
					price: this.outpatientInfoCreate.consultationAmount,
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			// 新增 预约_问诊单信息
			insertappointConsultationForm(form) {
				insertappointConsultationForm(form).then(res => {
					this.insertAppointInfo({
						...this.outpatientInfoCreate,
						consultationForm: res.data,
						status: 0
					})
				}).catch(err => {})
			},
			// 新增 预约信息
			insertAppointInfo(form) {
				insertAppointInfo(form).then(res => {
					uni.showToast({
						icon: 'none',
						title: '预约成功'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/pagesCommon/consultation/success?type=reservation&id=${appoint.data}`
						})
					}, 1500)
				}).catch(err => {})
			},
			// 新增 问诊_问诊单 与 问诊信息
			insertConsultationForm(form) {
				insertConsultationForm(form).then(res => {
					this.createOrderInfo(parseInt(res.data.outpatientInfoId))
					return res
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '提交成功'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/pagesCommon/consultation/success?type=consultation&id=${res.data.outpatientInfoId}`
						})
					}, 1500)
				}).catch(err => {})
			},
			// 新增问诊信息
			insertoutpatientInfo(form) {
				insertoutpatientInfo(form).then(res => {
					this.createOrderInfo(res.data)
					return res
				}).then(() => {
					uni.showToast({
						icon: 'none',
						title: '提交成功'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/pagesCommon/consultation/success?type=consultation&id=${res.data}`
						})
					}, 1500)
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.consultation_details_page {
		padding: 0;

		.btns_group {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btns {
				flex: 1;
				margin: 0 30rpx;
				border-radius: 20rpx;
				padding: 30rpx 0;

				&.gray {
					background-color: rgba(153, 153, 153, 0.2);
					color: #999;
				}
			}
		}


		.details_group {
			padding: 20rpx;
			background-color: #FFF;
			margin-bottom: 30rpx;

			.details_item {
				position: relative;
				padding: 20rpx;
				border: bottom;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&.required {
					.item_title {
						margin-left: 20rpx;
					}

					&::before {
						content: "*";
						position: absolute;
						color: #F00;
					}
				}

				&.block {
					display: block;
					border: none;

					.item_text {
						margin-top: 20rpx;
					}

				}

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					border: none;
					padding-bottom: 0;
				}

				.item_title {
					font-size: 28rpx;
					color: #333;
				}

				.item_text {
					font-size: 28rpx;
					color: #999;

					.item_input {
						display: flex;
						align-items: center;
						text-align: right;
					}

					.image_group {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						image {
							flex: 0 0 130rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							width: 120rpx;
							height: 120rpx;
						}

						.file_text {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-size: 18rpx;
						}
					}

					.textarea {
						padding: 20rpx;
						background: #F8FAFB;
						border-radius: 10rpx;

						textarea {
							height: 220rpx;
						}
					}

					.radio_group {
						.radio_item {
							display: flex;
							align-items: center;
							padding: 10rpx 0;

							.radio {
								transform: scale(0.7)
							}

							.radio_item_text {
								padding: 10rpx 20rpx;

							}
						}
					}
				}
			}
		}
	}
</style>